<template>
    <div class="Swiper">
        <swiper :options="swiperOption" ref="mySwiper">
            <!-- slides -->
            <swiper-slide v-for="(item,index) in imgList" :key="index"><img :src="item.banner_img" @click="navigation(item)" /></swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" id="rePag"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name: 'carrousel',
        components: {
            swiper,
            swiperSlide
        },
        props:['imgList'],
        data() {
            return {
                swiperOption: {
                    // some swiper options/callbacks
                    // 所有的参数同 swiper 官方 api 参数
                    // ...
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    loop: true,
                    autoplay: {
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                    }
                }
            }
        },
        created(){ 
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        methods:{
            /*banner 跳转*/
            navigation(item){
              let data = {
                banner_id: item.banner_id,
                banner_name: item.banner_name,
                banner_url: item.banner_url,
                member_id: this.getMemberId()
              }
              this.Posthttp('/?method=flower.index.addAdRecord',data, res => {})
              if(item.banner_url && item.banner_url != 'HuaWa://upload') {

                  if(item.banner_type === 1){//内部跳转
                      let routeUrl = item.banner_url.replace('http://hyxy.huawa.com','')
                      this.$router.push(routeUrl)
                  }else{//外部跳转
                      if(this.deviceType() === 2){
                        this.$router.push(`/othernet/${encodeURIComponent(item.banner_url)}`)
                      } else {
                        window.location.href = item.banner_url
                      }
                  }
                  
              }else if(item.banner_url === 'HuaWa://upload'){

                  if(this.deviceType() === 1){
                      window.hy.showVideoListUI()
                  }else if(this.deviceType() === 2){
                      window.webkit.messageHandlers.hyShowVideoListUI.postMessage(null)
                  }else{
                      this.$router.push('/bag/upguid')
                  } 

              }
            }
        }
    }
</script>
<style lang="scss" scoped="">
    .Swiper{
        width: 100%;
        height: auto;
        img{
            width: 100%;
            height: auto;
            font-size: 0;
            display: block;
        }
    }
</style>